<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/slide-unlock.css" />
    <!-- <link rel="stylesheet" href="css/swipeslider.css"> -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="header_login flex">
      <div class="left"><img src="images/goback.png" alt="" /></div>
      <div class="center">注册</div>
      <div class="right"><a href="">登录</a></div>
    </div>
    <div class="registerbox">
      <div class="input_box flex">
        <!-- <div class="title">用户名</div> -->
        <div class="input">
          <input type="text" placeholder="手机号" />
        </div>
      </div>
      <div class="input_box flex">
        <div class="input">
          <input type="password" placeholder="请输入密码" />
        </div>
      </div>

      <div class="input_box flex Captcha">
        <div class="input">
          <input type="password" placeholder="请输入验证码" />
        </div>
        <div class="getCaptcha">获取验证码</div>
      </div>

      <!-- <div id="slider">
        <div id="slider_bg"></div>
        <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
      </div> -->
      <button class="login_btn">注册</button>
      <div class="text">注册代表已同意<a>《用户协议》</a></div>
    </div>
  </body>
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/public.js"></script>
  <script src="js/jquery.slideunlock.js"></script>
  <script>
    $(function () {
      // var slider = new SliderUnlock(
      //   "#slider",
      //   {
      //     successLabelTip: "验证成功",
      //   },
      //   function () {
      //     alert("验证成功,即将跳转至#");
      //     window.location.href = "#";
      //     //以下四行设置恢复初始，不需要可以删除
      //     setTimeout(function () {
      //       $("#labelTip").html("拖动滑块验证");
      //       $("#labelTip").css("color", "#787878");
      //     }, 2000);
      //     slider.init();
      //   }
      // );
      // slider.init();
    });
    $(".getCaptcha").click(function () {
      // 验证码
      if ($(this).html() == "获取验证码") {
        setTime();
      }
    });
    function setTime() {
      let time = 10;
      let i = 0;
      let that = this;
      let set = setInterval(function () {
        $(".getCaptcha").html(--time + "秒重发");
        i++;
        if (i == 1) {
          console.log("get code start1 ... ");
        }
      }, 1000);
      setTimeout(function () {
        $(".getCaptcha").html("获取验证码");
        clearInterval(set);
      }, time * 1000);
    }
  </script>
</html>
